<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>课程管理 - 教师面板</title>
  <link rel="stylesheet" href="./../../static/teacher/css/style.css">
  <script src="./../../static/teacher/js/course-management.js"></script>
</head>
<body>
  <header class="navbar">
		<div class="logo">TeacherPanel</div>
		<h1>教师控制面板</h1>
		<div class="user-info">
			<img src="teacher-avatar.jpg" alt="Teacher Avatar" class="avatar">
			<span>教师</span>
			<button class="logout-btn" id="logout-btn">退出</button>
		</div>
	</header>

  <aside class="sidebar">
    <ul>
      <li><a href="home.html">工作首页</a></li>
      <li><a href="course-management.html">课程管理</a></li>
      <li><a href="teaching-management.html">教学管理</a></li>
    </ul>
  </aside>

  <!-- 主内容 -->
  <main>
    <section class="dashboard">
      <h2>课程信息</h2>

      <!-- 课程信息展示 -->
      <div class="course-info">
        <h3>课程名称：<span id="course-name">计算机网络</span></h3>
        <p><strong>课程状态：</strong><span id="course-status">已开放</span></p>
        <p><strong>课程活动：</strong><span id="course-activity">期末项目</span></p>
      </div>

      <!-- 学习单元管理 -->
      <div class="learning-units">
        <h3>学习单元管理
			<button onclick="showAddUnitModal()">新增学习单元</button>
		</h3>
		
        <table id="learning-units-table">
          <thead>
            <tr>
              <th>学习单元名称</th>
              <th>简介</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <!-- 学习单元将动态插入 -->
          </tbody>
        </table>
        
      </div>

      <!-- 学生学习进度 -->
      <div class="student-progress">
        <h3>学生学习进度</h3>
        <table>
          <thead>
            <tr>
              <th>学生姓名</th>
              <th>学习单元</th>
              <th>学习进度</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody id="student-progress-table">
            <!-- 学生进度将动态插入 -->
          </tbody>
        </table>
      </div>
    </section>
  </main>

  <!-- 新增学习单元弹窗 -->
  <div id="add-unit-modal" class="modal">
    <div class="modal-content">
      <h3>新增学习单元</h3>
      <form id="add-unit-form">
        <label for="unit-name">单元名称：</label>
        <input type="text" id="unit-name" required><br>
        <label for="unit-description">简介：</label>
        <textarea id="unit-description" required></textarea><br>
        <label for="unit-status">状态：</label>
        <select id="unit-status" required>
          <option value="open">已开启</option>
          <option value="closed">已关闭</option>
        </select><br>
        <button type="submit">保存</button>
        <button type="button" onclick="closeModal()">取消</button>
      </form>
    </div>
  </div>

  <footer class="footer">
    <p>© 2024 TeacherPanel, All Rights Reserved</p>
    <a href="/help">帮助</a> | <a href="/contact">联系我们</a>
  </footer>


</body>
</html>
